<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="element-plus/index.css" />
		<script src="js/vue.js"></script>
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id="app">
			<el-form :model="form" :rules="rules" ref="registerForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="帐号" prop="username">
					<el-input v-model="form.username" placeholder="请输入帐户" />
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input v-model="form.mobile" placeholder="请输入手机号" />
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="form.email" placeholder="请输入邮箱" />
				</el-form-item>
				<el-form-item label="生日" prop="birthday">
					<el-date-picker v-model="form.birthday" type="date" placeholder="请选择生日" value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" type="password" show-password placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次输入密码" />
				</el-form-item>
				<el-form-item prop="agreement">
					<el-checkbox v-model="form.agreement">
						我已阅读并接受
						<el-link type="primary" href="#">《版权声明》</el-link>
						和
						<el-link type="primary" href="#">《隐私保护》</el-link>
					</el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">注册</el-button>
				</el-form-item>
			</el-form>
		</div>
		<script>
			const {
				createApp
			} = Vue
			const {
				ElForm,
				ElFormItem,
				ElInput,
				ElDatePicker,
				ElCheckbox,
				ElLink,
				ElButton
			} = ElementPlus
			createApp({
				components: {
					ElForm,
					ElFormItem,
					ElInput,
					ElDatePicker,
					ElCheckbox,
					ElLink,
					ElButton
				},
				data() {
					return {
						form: {
							username: '',
							mobile: '',
							email: '',
							birthday: '',
							password: '',
							confirmPassword: '',
							agreement: false
						},
						rules: {
							username: [{
								required: true,
								message: '请输入帐户',
								trigger: 'blur'
							}],
							mobile: [{
									required: true,
									message: '请输入手机号',
									trigger: 'blur'
								},
								{
									pattern: /^1[3-9]\d{9}$/,
									message: '手机号格式不正确',
									trigger: 'blur'
								}
							],
							email: [{
									required: true,
									message: '请输入邮箱',
									trigger: 'blur'
								},
								{
									type: 'email',
									message: '邮箱格式不正确',
									trigger: 'blur'
								}
							],
							birthday: [{
								required: true,
								message: '请选择生日',
								trigger: 'change'
							}],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								},
								{
									min: 6,
									max: 16,
									message: '长度在 6 到 16 个字符',
									trigger: 'blur'
								}
							],
							confirmPassword: [{
									required: true,
									message: '请再次输入密码',
									trigger: 'blur'
								},
								{
									validator: (rule, value, callback) => {
										if (value !== this.form.password) {
											callback(new Error('两次输入密码不一致!'))
										} else {
											callback()
										}
									},
									trigger: 'blur'
								}
							],
							agreement: [{
								validator: (rule, value, callback) => {
									if (!value) {
										callback(new Error('请阅读并同意协议'))
									} else {
										callback()
									}
								},
								trigger: 'change'
							}]
						}
					}
				},
				methods: {
					submitForm() {
						this.$refs.registerForm.validate(valid => {
							if (valid) {
								console.log('表单验证通过', this.form)
							} else {
								console.log('表单验证失败')
							}
						})
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>

		<style>
			.demo-ruleForm {
				max-width: 500px;
				margin: 20px auto;
			}
		</style>
	</body>
</html>
